/* Page
-------------------------------------------------- */

#wrap {
    width: 100%;
    min-height: 100%; /* for modern browsers */
    height:auto !important; /* for modern browser */
    height:100%; /* for IE */
    overflow: hidden !important; /* FF scrollbar */ 
    padding: 0 0 0 @bmf-sidebar-width;
    margin: 0;
    -webkit-transition: padding 0.5s ease, margin 0.5s ease;
    -moz-transition: padding 0.5s ease, margin 0.5s ease;
    -o-transition: padding 0.5s ease, margin 0.5s ease;
    transition: padding 0.5s ease, margin 0.5s ease;
}

#sidebar {
    position: fixed;
    z-index: 1000;
    width: @bmf-sidebar-width;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;
    left: 0;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
    -webkit-overflow-scrolling: touch;

    p.switch {
        visibility: hidden;
        line-height: 1;
        height: @bmf-logo-dim + 2*@bmf-logo-padding;
        margin: 0;
        padding: 0;
        text-align: right;

        a {
            display:block;
            padding: @bmf-logo-padding;
            opacity: 0.8;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 1.0;
            }
        }

        img {
            height: @bmf-logo-dim;
            width: @bmf-logo-dim;
        }
    }
}

/* Styles
-------------------------------------------------- */

#sidebar {
    color: #333;

    ul.sidebar-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        -webkit-transition: margin 0.5s ease;
        -moz-transition: margin 0.5s ease;
        -o-transition: margin 0.5s ease;
        transition: margin 0.5s ease;

        p {
            color: @gray-light;
            padding: 0;
            margin: 0;
            text-align: center;
            background: @gray-darker;
        }

        li {
            padding: 0;
            margin: 0;

            a {
                padding: @nav-link-padding;
                margin: 0;
                display: block;
                text-decoration: none;
                color: @gray-light;

                &:hover {
                    color: @body-bg;
                    background: @gray-dark;
                }
            }
        }
        li.active {
            a {
                color: @gray-lighter;
            }
        }
        li.sidebar-board {
            text-align:center;
            font-size: 120%;
            padding: 0;

            p {
                padding: @nav-link-padding;
                text-decoration: underline;
                background: transparent;
            }
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    }
}

/* Toggle
-------------------------------------------------- */

@media(max-width: @screen-sm-max) {

    #wrap, footer {
        padding-left: @bmf-logo-dim + 2 * @bmf-logo-padding;
    }

    .bmfsidebar-toggled #wrap,
    .bmfsidebar-toggled footer {
        margin-left: @bmf-sidebar-width - @bmf-logo-dim - 2 * @bmf-logo-padding ;
    }
  
    #sidebar {
        left: @bmf-logo-dim + 2 * @bmf-logo-padding - @bmf-sidebar-width;
        overflow-y: hidden;
  
        p.switch {
            visibility: visible;
        }
        ul.sidebar-nav {
            margin-left: -@bmf-logo-dim - 2 * @bmf-logo-padding;
        }
    }

    .bmfsidebar-toggled #sidebar {
        left: 0;
        overflow-y: auto;
        ul.sidebar-nav {
            margin-left: 0;
        }
    }
}
